import { SafeArea } from 'antd-mobile';
import { useState } from 'react';
import {
  ActionSheet,
  Button,
  Checkbox,
  Dialog,
  Flex,
  Form,
  Image,
  Input,
  NavBar,
  Picker,
  Uploader,
} from 'react-vant';
import { history } from 'umi';
import './profile.less';

const goBack = () => {
  history.back();
};

export default function ProfilePage() {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const onCancel = () => setVisible(false);
  return (
    <div className="profile">
      <NavBar
        title="修改资料"
        leftText="返回"
        onClickLeft={goBack}
        rightText={
          <Flex className="profile-user" align="center">
            <Flex.Item className="profile-user-avatar">
              <Image
                round
                width="24"
                height="24"
                fit="cover"
                src="//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg"
              />
            </Flex.Item>
            <Flex.Item className="profile-user-name">小熊</Flex.Item>
          </Flex>
        }
      />
      <div className="container">
        <Form form={form} className="profile-form">
          <h3 className="profile-title">基本资料（请真实填写）</h3>
          <Form.Item
            rules={[{ required: true, message: '昵称为必填项' }]}
            name="nickname"
            label="昵称"
          >
            <Input placeholder="请填写您的昵称" />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '年龄为必填项' }]}
            name="age"
            label="年龄"
          >
            <Input type="number" placeholder="请填写您的年龄" />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '身高为必填项' }]}
            name="height"
            label="身高"
            suffix={<span className="unit">cm</span>}
          >
            <Input type="number" placeholder="请填写您的身高" />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '体重为必填项' }]}
            name="weight"
            label="体重"
            suffix={<span className="unit">kg</span>}
          >
            <Input type="number" placeholder="请填写您的体重" />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '微信号为必填项' }]}
            name="wechat"
            label="微信"
          >
            <Input placeholder="请填写您的微信号" />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '手机号为必填项' }]}
            name="mobile"
            label="手机"
          >
            <Input type="tel" placeholder="请填写您的手机号" maxLength={11} />
          </Form.Item>
          <Form.Item
            isLink
            rules={[{ required: true, message: '所在城市为必选项' }]}
            name="city"
            label="城市"
            trigger="onConfirm"
            onClick={(_, action) => {
              // @ts-ignore
              action.current?.open();
            }}
          >
            <Picker
              defaultValue="武汉"
              popup
              columns={['武汉', '长沙', '成都']}
            >
              {(val) => val || '请选择所在城市'}
            </Picker>
          </Form.Item>
          <Form.Item
            isLink
            rules={[{ required: true, message: '星座为必选项' }]}
            name="constellation"
            label="星座"
            trigger="onConfirm"
            onClick={(_, action) => {
              // @ts-ignore
              action.current?.open();
            }}
          >
            <Picker
              popup
              columns={[
                '水瓶座',
                '双鱼座',
                '白羊座',
                '金牛座',
                '双子座',
                '巨蟹座',
                '狮子座',
                '处女座',
                '天秤座',
                '天蝎座',
                '射手座',
                '摩羯座',
              ]}
            >
              {(val) => val || '请选择您的星座'}
            </Picker>
          </Form.Item>
          <Form.Item
            rules={[{ required: false, message: '请填写个人介绍' }]}
            name="intro"
            label="个人介绍"
          >
            <Input.TextArea
              rows={3}
              autoSize
              maxLength={140}
              showWordLimit
              placeholder="请填写个人介绍，将展示在您的个人主页"
            />
          </Form.Item>
          <h3 className="profile-title">可接单类型（多选）</h3>
          <div className="profile-event">
            <Flex justify="center" gutter={10} wrap="wrap">
              <Flex.Item span={6}>
                <div className="item">
                  <img
                    className="type-icon"
                    width="32"
                    height="32"
                    src="//res.dayupp.com/partner/ce256b9a6227ae7a77f7c470f495e488.png"
                    alt=""
                  />
                  <p>线下开黑</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className="item">
                  <img
                    className="type-icon"
                    width="32"
                    height="32"
                    src="//res.dayupp.com/partner/59809efe258fbcc037298776bdd41b6b.png"
                    alt=""
                  />
                  <p>线上陪练</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className="item">
                  <img
                    className="type-icon"
                    width="32"
                    height="32"
                    src="//res.dayupp.com/partner/a996962cdf0789e3749f11aca41a5b3f.png"
                    alt=""
                  />
                  <p>共进晚餐</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className="item">
                  <img
                    className="type-icon"
                    width="32"
                    height="32"
                    src="//res.dayupp.com/partner/13e9c6b3a1ea7ab9741ff1c8c086bbd5.png"
                    alt=""
                  />
                  <p>微醺小酌</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className="item">
                  <img
                    className="type-icon"
                    width="32"
                    height="32"
                    src="//res.dayupp.com/partner/a20a94966c2fa6dd31413c55334e3894.png"
                    alt=""
                  />
                  <p>一起观影</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className="item active">
                  <img
                    className="type-icon"
                    width="32"
                    height="32"
                    src="//res.dayupp.com/partner/b7f5ab6607f0da8c930a2d3a1796e800.png"
                    alt=""
                  />
                  <p>台球助教</p>
                  <div className="selected">
                    <svg
                      width="17px"
                      height="13px"
                      viewBox="0 0 17 13"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <g
                        stroke="none"
                        stroke-width="1"
                        fill="none"
                        fill-rule="evenodd"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <g
                          transform="translate(-2832.000000, -1103.000000)"
                          stroke="#ffffff"
                          stroke-width="3"
                        >
                          <g transform="translate(2610.000000, 955.000000)">
                            <g transform="translate(24.000000, 91.000000)">
                              <g transform="translate(179.177408, 36.687816)">
                                <polyline points="34.2767388 22 24.797043 31.4796958 21 27.6826527"></polyline>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </div>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className="item">
                  <img
                    className="type-icon"
                    width="32"
                    height="32"
                    src="//res.dayupp.com/partner/d4163e8c1492e1c2af9a2c607d19a74e.png"
                    alt=""
                  />
                  <p>密室逃脱</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className="item">
                  <img
                    className="type-icon"
                    width="32"
                    height="32"
                    src="//res.dayupp.com/partner/fdb0314e3a3eb47e30049f6bb7ff2caa.png"
                    alt=""
                  />
                  <p>一起散步</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className="item">
                  <img
                    className="type-icon"
                    width="32"
                    height="32"
                    src="//res.dayupp.com/partner/ae139c3bd22b33074f047fc6ca06dafe.png"
                    alt=""
                  />
                  <p>一起唱歌</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className="item">
                  <img
                    className="type-icon"
                    width="32"
                    height="32"
                    src="//res.dayupp.com/partner/11915b92953901e2db8264d196cb870d.png"
                    alt=""
                  />
                  <p>剧本桌游</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className="item">
                  <img
                    className="type-icon"
                    width="32"
                    height="32"
                    src="//res.dayupp.com/partner/63b29a07f946cd333358924055733a98.png"
                    alt=""
                  />
                  <p>旅游向导</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className="item">
                  <img
                    className="type-icon"
                    width="32"
                    height="32"
                    src="//res.dayupp.com/partner/1f646b0cead757771829ad5ceb21d8c3.png"
                    alt=""
                  />
                  <p>连麦聊天</p>
                </div>
              </Flex.Item>
            </Flex>
          </div>
          <h3 className="profile-title">个人展示资料</h3>
          <Form.Item
            name="avatar"
            label="上传头像"
            rules={[{ required: true, message: '请上传头像' }]}
            initialValue={[
              {
                url: 'https://img.yzcdn.cn/vant/sand.jpg',
              },
            ]}
          >
            <Uploader
              maxCount={1}
              onDelete={() =>
                Dialog.confirm({ title: '提示', message: '确认删除?🤔' })
              }
            />
          </Form.Item>
          <Form.Item
            name="video"
            label="上传视频"
            rules={[{ required: false, message: '请上传视频' }]}
            initialValue={[
              {
                url: 'https://img.yzcdn.cn/vant/sand.jpg',
              },
            ]}
          >
            <Uploader maxCount={1} />
          </Form.Item>
          <Form.Item
            name="photos"
            label="上传照片"
            rules={[{ required: true, message: '请上传至少3张照片' }]}
            intro="至少上传 3 张照片，最多可上传 9 张"
            initialValue={[
              {
                url: 'https://img.yzcdn.cn/vant/sand.jpg',
              },
              {
                url: 'https://img.yzcdn.cn/vant/sand.jpg',
              },
              {
                url: 'https://img.yzcdn.cn/vant/sand.jpg',
              },
              {
                url: 'https://img.yzcdn.cn/vant/sand.jpg',
              },
              {
                url: 'https://img.yzcdn.cn/vant/sand.jpg',
              },
            ]}
          >
            <Uploader
              maxCount={9}
              multiple
              onDelete={() =>
                Dialog.confirm({ title: '提示', message: '确认删除?🤔' })
              }
            />
          </Form.Item>
          <Form.Item
            name="tags"
            label="个人标签"
            rules={[{ required: true, message: '请选择3个个人标签' }]}
          >
            <Flex className="choose-tags" gutter={5} wrap="wrap">
              <Flex.Item className="tag active">
                <span>密室爱好者</span>
              </Flex.Item>
              <Flex.Item className="tag active">
                <span>玩乐达人</span>
              </Flex.Item>
              <Flex.Item className="tag active">
                <span>酒搭子</span>
              </Flex.Item>
              <Flex.Item className="tag">
                <span>氛围制造者</span>
              </Flex.Item>
              <Flex.Item className="tag">
                <span>御姐</span>
              </Flex.Item>
              <Flex.Item className="tag">
                <span>萝莉</span>
              </Flex.Item>
              <Flex.Item className="tag">
                <span>在校学生</span>
              </Flex.Item>
              <Flex.Item className="tag">
                <span>电竞少女</span>
              </Flex.Item>
            </Flex>
          </Form.Item>
          <Form.Item
            name="agreement"
            rules={[{ required: true, message: '必须同意平台用户协议' }]}
          >
            <Checkbox checkedColor="#a880ff">
              <div className="agreement">
                请先阅读并同意
                <span onClick={() => setVisible(true)}>《用户协议》</span>
              </div>
            </Checkbox>
          </Form.Item>
          <Button
            className="profile-submit-btn"
            round
            nativeType="submit"
            type="primary"
            size="large"
            color="linear-gradient(to right, #454545, #111)"
            block
          >
            提 交
          </Button>
          <SafeArea position="bottom" />
        </Form>
      </div>
      <ActionSheet title="用户协议" visible={visible} onCancel={onCancel}>
        <div className="user-agreement">
          <p>
            感谢您选择并信任大鱼约玩！请仔细阅读本条款，同意后方可进行下一步。
          </p>
          <p>
            <strong>
              大鱼约玩是一个健康绿色的约玩平台。平台仅提供绿色约玩媒介服务，严令禁止一切违反法律法规，破坏社会秩序的行为！
            </strong>
          </p>
          <p>
            <strong>平台严令禁止的行为：</strong>
          </p>
          <ol>
            <li>
              01、发布的内容涉嫌反动、反政治、反社会；宣扬恐怖、邪教、封建迷信；损害国家利益、危害国家安全、破坏民族团结；散布谣言，扰乱社会秩序，破坏社会稳定；以非法占有为目的，利用虚构事实等方法诈取他人财物，泄露他人隐私等。
            </li>
            <li>
              02、诱导/教唆用户通过非本平台的第三方进行交易，使用微信、支付宝、现金红包、转账等支付方式均属于第三方私下交易范畴。
            </li>
            <li>
              03、发布宣传竞品的言论，宣传、鼓励使用其他竞品平台，以任何形式传播非本平台授权的平台或工具、广告信息等。
            </li>
            <li>
              04、发布或提供淫秽色情或低俗擦边服务，诱导用户进行情色服务或交易等。
            </li>
            <li>
              05、平台禁止通过任何方式散布或传播代练行为；任何代练行为平台都严令禁止。
            </li>
            <li>06、为用户提供除订单服务以外的服务，以获取利益。</li>
            <li>
              07、上传的照片、视频等内容非本人，侵犯他人隐私、肖像权的行为。
            </li>
          </ol>
          <p>
            <strong>
              触发以上违规行为，平台将有权终止合作，并封禁账户，情节严重的将移交公安机关处理。
            </strong>
          </p>
        </div>
      </ActionSheet>
    </div>
  );
}
